import React from 'react'
//#region 
//折叠区间代码
//#endregion
export default class BindEvents extends React.Component{
    constructor(){
        super()
        this.state={
            msg:'hello,react',
            age:11
        }
    }
    render(){
        return <div>
            <button onClick={()=>this.show('s')}>按钮</button>
            <hr></hr>
            <h3>{this.state.msg}</h3>
            <hr></hr>
            {/* value属性需要配置readOnly 或者 onChange属性 */}
            <input style={{width:'100px'}} value={this.state.msg} onChange={(e)=>{this.txtChanges(e)}} ref='txt'></input>
        </div>;
    }
    txtChanges = (e)=>{
        // 获取文本框的值
        //1. 通过事件参数

       /*  console.log(e.target.value) */

        //第二种 ref this.refs.
        console.log("this.refs.txt="+this.refs.txt.value)
        const newValue = e.target.value;
        this.setState({
            msg: newValue
        })
    }
    show = (arg1)=>{
        console.log('show方法被调用' + arg1)
        this.setState({
            // 在state中只会把传入的状态更新,不会覆盖所有的state属性
            //setState方法是异步的
            msg:arg1
        },function(){
            console.log(this.state.msg)
        })
    }
}